<template>
    <div>
        <div class="mui-card" v-for="item in list" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="switch"><mt-switch @change="changeSel(item.id,item.selected)" v-model="item.selected"></mt-switch></div>
                    <div class="img"><img :src="item.url" alt=""></div>
                    <div class="control">
                        <h1>{{item.title}}</h1>
                        <div class="ctr_bot">
                        <span>￥{{item.price}}</span>
                        <!-- <numbox @getresult="getresult" :count="item.count" :id="item.id"></numbox> -->
                        <numbox :count="item.count" :id="item.id"></numbox>
                        <span @click="deleteList(item.id,item.delected)">删除</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="total mui-card-content-inner">
                    <div class="left">
                        <div class="to_top">
                        <span>总计（不含运费）</span>
                        </div>
                        <div class="to_bottom">
                        <span>已勾选商品</span><span>{{this.$store.getters.getAllResult.res_count}}</span>件，总价：<span>￥{{this.$store.getters.getAllResult.result}}</span>
                        </div>
                    </div>
                    <div class="right">
                        <mt-button size="normal" type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import numbox from '../subcomponents/shopcontainer_numbox.vue';
export default {
    data:function () {
        return{
            list:[],
            // resultList:{}
        }  
    },
    methods:{
        // getresult:function () {
        //     this.resultList = {res:this.$store.getters.getAllResult.result,res_count:this.$store.getters.getAllResult.res_count};
        // },
        changeSel:function (id,sel) {
            this.$store.commit('updateSel',{id,sel});
            // this.getresult();
        },
        deleteList:function (id) {
            this.$store.commit('deleteCar',{id});
            // this.getresult();
        },
        getList:function () {
            this.list = this.$store.state.car;
        }
    },
    components:{
        numbox,
    },
    created () {
        this.getList();
        // this.getresult();
    }
}
</script>
<style lang="scss" scoped>
.mui-card-content-inner{
    display: flex;
    align-items: center;
    // flex-direction: column;
    .img{
        img{
            width: 65px;
            height: 65px;
        }
    }
    .control{
        width: 185px;
        h1{
            margin-top: 0;
            font-weight: bold;
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .ctr_bot{
            width: 185px;
        span:nth-child(1){
            color: #f10;
        }
        span:last-child{
            color: rgb(85, 193, 236);
        }
        .mui-numbox{
            width: 100px;
            height: 24px;  
        }
        }
    }
}
.total{
    // margin-top: -20px;
    height: 120px;
    justify-content: space-between;
    .left{
        color: rgb(138, 136, 136);
        flex-direction: column;
        margin-top: 10px; 
        font-size: 14px;
        .to_top{
            margin-bottom: 10px;
        }
        .to_bottom{
            span:nth-child(2),span:nth-child(3){
                color: #f10;
                font-size: 26px;
            }
        }
    }
    .right{
        margin-top: 26px;
        label{
            margin-bottom: 0;
        }
    }
}
</style>